
<template>
  <div>
    <p>数据: {{ localData }}</p>
    <button @click="updateLocalData">修改数据</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import useInjectLocal from '../injectLocal/useInjectLocal.ts';

export default defineComponent({
  setup() {
    // 将方法结构出来
    const { localData, provideLocalData, injectLocalData } = useInjectLocal('myLocalData', { count: 0 });

    provideLocalData();
    injectLocalData();

    const updateLocalData = () => {
      localData.count++;
    };

    return {
      localData,
      updateLocalData,
    };
  },
});
</script>